<template>
<el-dialog :title="!dataForm.aid ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="活动地点" prop="local">
            <el-input v-model="dataForm.local" placeholder="活动地点"></el-input>
        </el-form-item>
        <el-form-item label="主办方" prop="organizer">
            <el-input v-model="dataForm.organizer" placeholder="主办方"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="联系方式"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="请选择开始时间"></el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="请选择结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="活动状态" prop="status">
            <el-select v-model="dataForm.status" placeholder="请选择活动状态">
                <el-option label="已结束" value="0"></el-option>
                <el-option label="进行中" value="1"></el-option>
                <el-option label="报名中" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动简介" prop="info">
            <el-input v-model="dataForm.info" placeholder="活动简介"></el-input>
        </el-form-item>
        <el-form-item label="活动图片" prop="img">
            <el-upload class="avatar-uploader" :action="url" :show-file-list="false" :on-success="handleIconSuccess">
                <img v-if="dataForm.img" :src="dataForm.img" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <p class="formInfo">建议尺寸：100*100像素，jpg、png图片类型</p>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    data() {
        return {
            url: "",
            visible: false,
            dataForm: {
                aid: 0,
                name: "",
                local: "",
                startTime: undefined,
                endTime: undefined,
                organizer: "",
                phone: "",
                info: "",
                img: "",
                status: undefined,
            },
            uploadVisible: false,
            dataRule: {
                name: [{
                    required: true,
                    message: "活动名称不能为空",
                    trigger: "blur"
                }, ],
                local: [{
                    required: true,
                    message: "活动地点不能为空",
                    trigger: "blur"
                }, ],
                organizer: [{
                    required: true,
                    message: "主办方不能为空",
                    trigger: "blur"
                }, ],
                phone: [{
                    required: true,
                    message: "联系方式不能为空",
                    trigger: "blur"
                }, ],
                img: [{
                    required: true,
                    message: "图片不能为空",
                    trigger: "blur"
                }, ],
                startTime: [{
                    required: true,
                    message: "开始时间不能为空",
                    trigger: "blur"
                }, ],
                endTime: [{
                    required: true,
                    message: "结束时间不能为空",
                    trigger: "blur"
                }, ]
            },
        };
    },
    methods: {
        init(id) {
            this.dataForm.aid = id || 0;
            this.url = this.$http.adornUrl(
                `/sys/oss/upload?token=${this.$cookie.get("token")}`
            );
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.aid) {
                    this.$http({
                        url: this.$http.adornUrl(
                            `/admin/active/info/${this.dataForm.aid}`
                        ),
                        method: "get",
                        params: this.$http.adornParams(),
                    }).then(({
                        data
                    }) => {
                        if (data && data.code === 0) {
                            this.dataForm.aid = data.active.aid;
                            this.dataForm.endTime = data.active.endTime;
                            this.dataForm.img = data.active.img;
                            this.dataForm.name = data.active.name;
                            this.dataForm.local = data.active.local;
                            this.dataForm.organizer = data.active.organizer;
                            this.dataForm.phone = data.active.phone;
                            this.dataForm.startTime = data.active.startTime;
                            this.dataForm.status = data.active.status;
                            this.dataForm.info = data.active.info;
                        }
                    });
                }
            });
        },
        // 表单提交
        dataFormSubmit() {
            console.log(this.dataForm.startTime);
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    this.dataForm.startTime = this.formatToLocalDateTime(this.dataForm.startTime);
                    this.dataForm.endTime = this.formatToLocalDateTime(this.dataForm.endTime);
                    this.$http({
                        url: this.$http.adornUrl(
                            `/admin/active/${!this.dataForm.aid ? "save" : "update"}`
                        ),
                        method: "post",
                        data: this.$http.adornData({
                            aid: this.dataForm.aid || undefined,
                            local: this.dataForm.local,
                            name: this.dataForm.name,
                            organizer: this.dataForm.organizer,
                            phone: this.dataForm.phone,
                            status: this.dataForm.status,
                            img: this.dataForm.img,
                            info: this.dataForm.info,
                            endTime: this.dataForm.endTime,
                            startTime: this.dataForm.startTime,
                        }),
                    }).then(({
                        data
                    }) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: "操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                }
            });
        },
        formatToLocalDateTime(dateTime) {
            const date = new Date(dateTime);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        handleIconSuccess(response) {
            this.dataForm.img = response.url;
            this.$forceUpdate();
        },
    },
};
</script>

<style lang="scss">
.formInfo {
    line-height: 0px;
    color: #999999;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
